<template>
  <draggable
    :list="list"
    :group="{ name: 'gi' }"
    item-key="name"
    class="box"
    :animation="200"
    ghost-class="ghost-class"
    :move="move"
  >
    <template #item="{ element }">
      <div>
        <div class="box-item">{{ element.name }} 我是主题</div>
        <div v-if="element.tasks && level < 2" class="nested-container">
          <layout
            :list="item"
            v-for="(item, index) in element.tasks"
            :key="index"
            :level="level + 1"
            style="width: 30%; background: green; height: 100px; border: 1px solid red"
            class="nested-item"
          />
        </div>
      </div>
    </template>
  </draggable>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "Layout",
  components: {
    draggable,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    level: {
      type: Number,
      default: 1,
    },
  },
  methods: {
    move(e) {
      const classList = Array.from(e?.to?.classList);
      const isRelatedNested = classList?.includes("nested-container");
      if (e?.draggedContext?.element?.tasks && isRelatedNested) return false;
      return true;
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 200px;
  height: 200px;
}

.box-item {
  color: #000;
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.ghost-class {
  background: rgb(255, 158, 158);
}

.nested-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>
